<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
		<script src="../../common/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/jsviews/jsviews.js" type="text/javascript"></script>
		<script src="../../plugins/select2/dist/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
    <!--<link rel="stylesheet" href="css/index.css">-->
    <link href="../../static/css/tdate_index.css" rel="stylesheet" type="text/css" />
    		<link rel="stylesheet" type="text/css" href="../../plugins/bootstrap/css/bootstrap.css"/>
		<link rel='stylesheet' href='../../plugins/bootstrap-table/bootstrap-table.css' />
    <style type="text/css">
    	.red{
    		color: red;
    	}
    </style>
    		<script src="../../plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src='../../plugins/bootstrap-table/bootstrap-table.js' type='text/javascript'></script>
		<script src='../../plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js' type='text/javascript' charset='utf-8'></script>
</head>

<body>
    <!-- 账户主要表格 -->
    <div class="account-box">
        <h2 class="account-title">
            <span class="left c3">外教日程</span>
            <a href="###" class="f-btn-fhby right">返回本月</a>
            <div class="clearfix right">
                <div class="f-btn-jian left">&lt;</div><div class="left f-riqi"><span class="f-year">2017</span>年<span class="f-month">1</span>月</div><div class="f-btn-jia left">&gt;</div><!-- 一定不能换行-->
            </div>
        </h2>
        <div class="f-rili-table">
            <div class="f-rili-head celarfix">
                <div class="f-rili-th">周日</div>
                <div class="f-rili-th">周一</div>
                <div class="f-rili-th">周二</div>
                <div class="f-rili-th">周三</div>
                <div class="f-rili-th">周四</div>
                <div class="f-rili-th">周五</div>
                <div class="f-rili-th">周六</div>
                <div class="clear"></div>
            </div>
            <div class="f-tbody clearfix">

            </div>
        </div>
    </div>
    <!--<hr class="layui-bg-black" style="margin: 20px;">-->
    <div style="padding: 20px;">
    	<table id='_mytable' ></table>
    </div>
</body>
<script>
	var tid = getQueryVariable('tid');
	var col=[
   {
		title:'上课日期',
		field:'classDate',
		align: 'center',
		valign: 'middle',
        formatter:function(value,row,index){
            return row.classDate+' '+row.classTime+'-'+row.classTimeEnd;
        }
	},
	{
		title:'学员',
		align: 'center',
		valign: 'middle',
		field:'studentname'
	},
	{
		title:'ZoomID',
		align: 'center',
		valign: 'middle',
		field:'zoomId'
	},
	{
		title:'课程',
		field:'nameZh',
		align: 'center',
		valign: 'middle'
	},
	{
		title:'时长(分钟)',
		field:'classLength',
		align: 'center',
		valign: 'middle'
	},
        {
            title:'类型',
            field:'type',
            align: 'center',
            valign: 'middle',
            formatter:function(value,row,index){
                if (row.type == 'tryListern') {
                    return '试听课程';
                } else {
                    return '正式课程';
                }
            }
        },
	{
		title:'状态',
		field:'state',
		align: 'center',
		valign: 'middle',
        formatter:function(value,row,index){
            var st='';
            switch(row.state){
                case 0:
                    st='默认';
                    break;
                case 1:
                    st='无课';
                    break;
                case 2:
                    st='学生请假';
                    break;
                case 3:
                    st='学生缺席';
                    break;
                case 4:
                    st='外教请假';
                    break;
                case 5:
                    st='外教缺席';
                    break;
                case 6:
                    st='补课';
                    break;
                case 7:
                    st='完成';
                    break;
                case -1:
                    st='';
                    break;
            }
            return st;
        }
	}
 ];
$(function(){
                //页面加载初始化年月
                var mydate = new Date();
                initTable();
                $(".f-year").html( mydate.getFullYear() );
                $(".f-month").html( mydate.getMonth()+1 );
                showDate(mydate.getFullYear(),mydate.getMonth()+1);
                //日历上一月
                $(".f-btn-jian ").click(function(){
                    var mm = parseInt($(".f-month").html());
                    var yy = parseInt($(".f-year").html());
                    if( mm == 1){//返回12月
                        $(".f-year").html(yy-1);
                        $(".f-month").html(12);
                        showDate(yy-1,12);
                    }else{//上一月
                        $(".f-month").html(mm-1);
                        showDate(yy,mm-1);
                    }
                })
                //日历下一月
                $(".f-btn-jia").click(function(){
                    var mm = parseInt($(".f-month").html());
                    var yy = parseInt($(".f-year").html());
                    if( mm == 12){//返回12月
                        $(".f-year").html(yy+1);
                        $(".f-month").html(1);
                        showDate(yy+1,1);
                    }else{//上一月
                        $(".f-month").html(mm+1);
                        showDate(yy,mm+1);
                    }
                })
                //返回本月
                $(".f-btn-fhby").click(function(){
                    $(".f-year").html( mydate.getFullYear() );
                    $(".f-month").html( mydate.getMonth()+1 );
                    showDate(mydate.getFullYear(),mydate.getMonth()+1);
                })
                
                //读取年月写入日历  重点算法!!!!!!!!!!!
                function showDate(yyyy,mm){
                	var Mm=mm<10?'0'+mm:mm;
                    var dd = new Date(parseInt(yyyy),parseInt(mm), 0);   //Wed Mar 31 00:00:00 UTC+0800 2010  
                    var daysCount = dd.getDate();            //本月天数  
                    var mystr ="";//写入代码
                    var icon = "";//图标代码
                    var today = new Date().getDate(); //今天几号  21
                    var monthstart = new Date(parseInt(yyyy)+"/"+parseInt(mm)+"/1").getDay()//本月1日周几  
                    var lastMonth; //上一月天数
                    var nextMounth//下一月天数
                    if(  parseInt(mm) ==1 ){
                        lastMonth = new Date(parseInt(yyyy)-1,parseInt(12), 0).getDate();
                    }else{
                        lastMonth = new Date(parseInt(yyyy),parseInt(mm)-1, 0).getDate();
                    }
                    if( parseInt(mm) ==12 ){
                        nextMounth = new Date(parseInt(yyyy)+1,parseInt(1), 0).getDate();
                    }else{
                        nextMounth = new Date(parseInt(yyyy),parseInt(mm)+1, 0).getDate();
                    }
                    //计算上月空格数
                    for(j=monthstart;j>0;j--){
                        mystr += "<div class='f-td f-null f-lastMonth' style='color:#ccc;'>"+(lastMonth-j+1)+"</div>";
                    }
                    
                    //本月单元格
                    for(i=0;i<daysCount;i++){
                    	var _dd=i<9?'0'+(i+1):(i+1);
                         //这里为一个单元格，添加内容在此
                        mystr += "<div class='f-td f-number'><span id='"+yyyy+'-'+Mm+'-'+_dd+"' class='f-day'>"+(i+1)+''+"</span>"
//                              +"<div class='f-yuan'></div>"
//                              +"<div class='f-table-msg'>回款中<span class='major'>1</span>笔。回款本息;<span class='major'>1，000，000</span>元</div>"//这里加判断
                                +"</div>"; 
                    }
                    
                    //计算下月空格数
                    for(k=0; k<42-(daysCount+monthstart);k++ ){//表格保持等高6行42个单元格
                        mystr += "<div class='f-td f-null f-nextMounth' style='color:#ccc;'>"+(k+1)+"</div>";
                    }
                     
                    
                    
                    //写入日历
                    $(".f-rili-table .f-tbody").html(mystr);
                    //给今日加class
                    if( mydate.getFullYear() == yyyy){
                        if( (mydate.getMonth()+1 ) == mm){
                            var today = mydate.getDate();
                            var lastNum = $(".f-lastMonth").length;
                            $(".f-rili-table .f-td").eq(today+lastNum-1).addClass("f-today");
                        }
                    }
                    //绑定选择方法
                    $(".f-rili-table .f-number").off("click");
                    $(".f-rili-table .f-number").on("click",function(){
                        $(".f-rili-table .f-number").removeClass("f-on");
                        $(this).addClass("f-on");
                        var dat=$(this).find('span').attr('id');
                        bindTable(dat);
                    });
                    
                    //绑定查看方法
                    $(".f-yuan").off("mouseover");
                    $(".f-yuan").on("mouseover",function(){
                        $(this).parent().find(".f-table-msg").show();
                    });
                    $(".f-table-msg").off("mouseover");
                    $(".f-table-msg").on("mouseover",function(){
                        $(this).show();
                    });
                    $(".f-yuan").off("mouseleave");
                    $(".f-yuan").on("mouseleave",function(){
                        $(this).parent().find(".f-table-msg").hide();
                    });
                    $(".f-table-msg").off("mouseleave");
                    $(".f-table-msg").on("mouseleave",function(){
                        $(this).hide();
                    });
                    bind(yyyy,mm);
                    bindTable(yyyy+'-'+Mm+'-01');
                }
//              bind(mydate.getFullYear(),);
                
                
            });
 var bind= function(year,month){
// 	alert(year+"-"+month);
			$.ajax({
				url:baseUrl+'/teacherPeriods/schedules',
				type: 'get',
				data: {'teacherId':tid,'year':year,'month':month},
				success: function(data) {
					console.log(data.rows);
					data=data.rows;
					for(var i=0;i<data.length;i++){
						console.log(data[i].date);
						var dat=new Date(data[i].date);
						var d=dat.getDate();
						d=d>9?d:'0'+d;
						var m=month>9?month:'0'+month;
						var id=year+'-'+m+'-'+d;
						console.log(id);
						$('#'+id).append('<i class="red">   ('+data[i].count+'课程)</i>');
					}
				}
			});
 }
 
 var initTable=function(){
 	$('#_mytable').bootstrapTable({
		locale: 'zh-CN',
		detailView: false,
		sidePagination: "client", //服务端处理分页
		striped: true,//隔行变色
		undefinedText: "",
		pagination: true,
		singleSelect: false,
		pageSize: pageList[0],
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pageNumber: 1,
		pageList: pageList,
		search: false, //不显示 搜索框
		uniqueId: "studentId", //每一行的唯一标识，一般为主键列
		showColumns: false, //不显示下拉框（选择显示的列）
		undefinedText: '',
		columns: col
	});
 }
 var bindTable=function(dat){
 	$.get(baseUrl+'/curriculumSchedules/getByTidAndDate?teacherId='+tid+'&classTime='+dat,function(data){
		$('#_mytable').bootstrapTable('load', data);//bootstrapTable('append':obj);
	});
 }
</script>
</html>